<template>
	<view class="goBack">
		<!-- 设备归还 待归还 组件-->
		<baseInput @inputChange="inputChange" @clearInput="clearInput"></baseInput>

		<scroll-view scroll-y="true" class="scroll-box" @scrolltolower="scrolltolower">
			<view class="content">
				<view class="info">
					<checkbox-group @change="checkboxChange">
						<view class="label" v-for="item in deviceList" :key="item.id">
							<view class="item">
								<view class="header" @click.stop="getInfoItem(item.code,item.projectName,item.subProjectName)">
									<image class="image" src="/subpackage-equipment/static/project1.png" mode=""></image>
									<view class="box">
										<view class="t1">{{ item.projectName || "" }}</view>
										<view class="t2">{{ item.subProjectName || "" }}</view>
									</view>
									<view class="back" @click.stop="getBackInfo(item.code,item.projectName,item.subProjectName)">
										归还
									</view>
								</view>
								
								<label>
									<view class="item-body">
										<view class="item-nav">
											<view class="name">出库设备：</view>
											<view class="value">{{ item.eqNames || "" }}</view>
										</view>
										<view class="item-nav">
											<view class="name">出库编号：</view>
											<view class="value">{{ item.code || "" }}</view>
										</view>
										<view class="item-nav">
											<view class="name">提交时间：</view>
											<view class="value">{{ item.time || "" }}</view>
										</view>
									</view>
									<!-- <checkbox :value="item.id +''" :checked="item.isChecked" class="checkbox color round" /> -->
								</label>
							</view>
							
						</view>
					</checkbox-group>
					
				</view>
			</view>
		</scroll-view>
		
		<!-- <view class="buttonAll">
			<view class="all">
				<checkbox-group @change="checkboxChangeAll" class="radio2">
					<label >
						<checkbox :value="allCheck.value" :checked="allCheck.isChecked"  class="color round"/>
						<text class="text">{{allCheck.name}}</text>
					</label>
				</checkbox-group>
				<view class="number">
					总计：{{ comeTotal }}个出库单、{{ deviceNum }}台设备
				</view>
			</view>			
			<view class="button">
				<u-button type="primary"  :loading="loading" text="一键归还" @click="getDeviceAll"></u-button>
			</view>
			
		</view> -->
	</view>
</template>

<script>
	import baseInput from "@/components/baseInput/baseInput.vue"
	import { getEqExWarehouseList, getEquipmentCode, getEqReturnWarehouseOneButton } from "@/api/device/deviceOut.js"
	import mixins from "@/utils/mixins.js"
	export default {
		name: "",
		mixins: [mixins],
		components: {
			baseInput
		},
		data() {
			return {
				loading: false,
				obj: {
					projectOrgId: "",  // 业主组织id
					code: "",          // 设备入库编号
					requestMode: "app",
					returnFlag: true,
				},
				pagination:{
					total: "",
					pageSize: 10,
					currentPage: 1
				},
				deviceList: [],       // 设备出库列表
				bool: false,
				allCheck : {
					name : '全选',
					value : 'all',
					isChecked : false,	
				},
				checkedAll: [],      // 全选的 checked 
				checkedList: [],       // 多选的 checked 
				comeTotal: 0,
				deviceNum: 0,
			}
		},
		mounted() {
			this.getList()
		},
		methods: {
			scrolltolower(){
				this.pagination.currentPage ++
				this.getList()
			},
			
			getList(){
				// 在发送请求就不在发送请求
				if(this.bool){
					return
				}
				if(this.pagination.total !== "" &&  this.deviceList.length !==0  && this.deviceList.length >= this.pagination.total ){
					// uni.showToast({
					// 	icon: "none",
					// 	title: "到底了"
					// })
					return
				}
				this.bool = true
				let _query={
					currPage: this.pagination.currentPage,
					pageSize: this.pagination.pageSize,
					params: this.obj
				}
				console.log('0000')
				getEqExWarehouseList(_query).then(res=>{
					console.log('111')
					let list = res.result.list.map(item=>({...item,time:this.getDate2(item.recordCreateDate)}))
					list.forEach(item=>{
						if(item.projectCascade){
							item.projectName = item.projectCascade.split("/")[0] || ""
							item.subProjectName = item.projectCascade.split("/")[1] +'/'+item.projectCascade.split("/")[2] || ""
							item.isChecked = false
						}
					})
					this.deviceList = [...this.deviceList, ... list]
					this.pagination.total = res.result.total
					this.bool = false
					
					if(this.checkedAll.length > 0){
						this.getChangeAll(this.checkedAll)
					}
					// this.getCheckedChange(this.checkedList)
					console.log(this.deviceList)
				})
			},
			
			inputChange(value){
				console.log(value,'value')
				if(value){
					this.obj.code=value
				}else {
					this.obj.code=""
				}
				clearTimeout(this.time)
				this.time = setTimeout(()=>{
					this.pagination.currentPage = 1
					this.deviceList = []
					this.obj.code = value
					this.getList()
				},500)
			},
			
			clearInput(){
				this.pagination.currentPage = 1
				this.deviceList = []
				this.obj.code = ""
				this.getList()
			},
			
			// 跳转到设备出库 详情 listInfo 页面
			getInfoItem(code,projectName,subProjectName){
				uni.navigateTo({
					url: `/subpackage-equipment/pages/device/deviceGoBack/components/listInfo?code=${code}&projectName=${projectName}&subProjectName=${subProjectName}`
				})
			},
			
			// 跳转到设备归还 详情 giveBack页面
			getBackInfo(code,projectName,subProjectName){
				uni.navigateTo({
					url: `/subpackage-equipment/pages/device/deviceGoBack/components/giveBack?code=${code}&projectName=${projectName}&subProjectName=${subProjectName}`
				})
			},
			
			checkboxChange(e){
				this.checkedList = e.detail.value
				this.getCheckedChange(this.checkedList)
				console.log(e.detail.value,'eeeeeeeeeee1212')
			},
			
			checkboxChangeAll(e){
				this.checkedAll = e.detail.value
				this.getChangeAll(this.checkedAll)
				console.log(e.detail.value,'eeeeeeeeeee')
			},
			
			// 多选框 选中触发
			getCheckedChange(list){
				let index = 0
				let newList = []
				this.deviceList.forEach(item=>{
					if(list.includes(item.id +"")){
						this.$set(item, 'isChecked', true)
					}else{
						this.$set(item, 'isChecked', false)
					}
					newList.push(item)
				})
				
				newList.forEach(item=>{
					if(item.isChecked){
						index ++
					}
				})
				if(index !== 0 && newList.length !== 0 && index === newList.length){
					this.allCheck.isChecked = true
				}else{
					this.allCheck.isChecked = false
				}
				
				this.getDeviceTotal()
			},
			
			// 全选触发
			getChangeAll(list){
				if(list.length !== 0){
					this.deviceList.forEach(item=>{
						this.$set(item, 'isChecked', true)
					})
					this.allCheck.isChecked = true
				}else{
					this.deviceList.forEach(item=>{
						this.$set(item, 'isChecked', false)
					})
					this.allCheck.isChecked = false
				}
				this.getDeviceTotal()
			},
			
			// 出库单数量  设备数量
			getDeviceTotal(){
				let index = 0
				let codeList = []
				this.deviceList.forEach(item=>{
					if(item.isChecked){
						index ++
						codeList.push(item.code)
					}
				})
				this.comeTotal = index
				if(codeList.length > 0){
					getEquipmentCode({code: codeList.join(",")}).then(res=>{
						if(res.success){
							this.deviceNum = res.result.length || 0
						}
					})
				}else{
					this.deviceNum = 0
				}
				
			},
			
			// 一键归还
			getDeviceAll(){
				let codeList = []
				this.deviceList.forEach(item=>{
					if(item.isChecked){
						codeList.push(item.code)
					}
				})
				if(codeList.length > 0){
					if(this.loading) return
					this.loading = true
					getEqReturnWarehouseOneButton({codes: codeList.join(",")}).then(res=>{
						if(res.success){
							this.loading = false
							this.pagination.currentPage = 1
							this.checkedAll = []
							this.checkedList = []
							this.deviceList = []
							this.getList()
							uni.showToast({
								icon: "none",
								title: "一键归还成功"
							})
						}
						this.loading = false
					})
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.goBack{
		padding-top: 16rpx;
		font-family: PingFang SC-Bold, PingFang SC;
		// padding-bottom: 180rpx;
		.scroll-box{
			// height: calc(100vh - 628rpx);
			height: calc(100vh - 460rpx);
			padding-top: 10rpx;
		}
		.info{
			padding-top: 34rpx;
			.item{
				width: 100%;
				height: 384rpx;
				background: linear-gradient(180deg, #FFFFFF 0%, rgba(255, 255, 255, 0) 100%);
				box-shadow: 0rpx 0rpx 34rpx 2rpx rgba(47, 128, 237, 0.1);
				border-radius: 8rpx 8rpx 8rpx 8rpx;
				padding: 0rpx 35rpx;
				box-sizing: border-box;
				margin-bottom: 36rpx;
				
				.header{
					height: 144rpx;
					display: flex;
					align-items: center;
					border-bottom: 2rpx solid #E0E7F6;
					.image{
						width: 70rpx;
						height: 70rpx;
						margin-right: 44rpx;
						margin-left: 12rpx;
					}
					.box{
						flex: 1;
						.t1{
							font-size: 32rpx;
							font-weight: bold;
							color: #445469;
							margin-bottom: 10rpx;
							max-width: 360rpx;
							white-space: nowrap;
							overflow: hidden;
							text-overflow: ellipsis;
						}
						.t2{
							font-size: 28rpx;
							font-weight: 500;
							color: #6A819E;
							max-width: 360rpx;
							white-space: nowrap;
							overflow: hidden;
							text-overflow: ellipsis;
						}
					}
					.back{
						width: 120rpx;
						height: 62rpx;
						background: rgba(47, 128, 237, 0.11);
						border-radius: 32rpx;
						font-size: 28rpx;
						font-weight: bold;
						color: #2F80ED;
						line-height: 62rpx;
						text-align: center;
					}
				}
				.item-body{
					font-size: 28rpx;
					font-weight: 500;
					color: #445469;
					padding-left: 10rpx;
					padding-top: 20rpx;
					.item-nav{
						display: flex;
						margin-top: 22rpx;
						.name{
							width: 140rpx;
						}
						.value{
							width: 360rpx;
							white-space:nowrap;
							overflow:hidden;
							text-overflow:ellipsis;
						}
					}
				}
			}
			
			.label{
				position: relative;
			}
			.checkbox{
				position: absolute;
				top: 180rpx;
				left: 600rpx;
			}
		}
		
		.all{
			margin-top: 25rpx;
			padding: 0rpx 30rpx;
			display: flex;
			align-items: center;
			.label{
				display: flex;
				align-items: center;
				font-weight: 600;
				color: #445469;
				font-size: 32rpx;
				margin-left: 15rpx;
				.text{
					margin-left: 10rpx;
				}
			}
			.number{
				flex: 1;
				font-size: 24rpx;
				font-weight: 600;
				color: #445469;
				text-align: right;
				margin-right: 38rpx;
			}
		}
		.buttonAll{
			position: fixed;
			bottom: 0;
			left: 0;
			width: 100%;
			background-color: #FFFFFF;
		}
		
		.button{
			margin-top: 30rpx;
		}
	}
</style>
